<template>
  <div class="mer-steps-wrapper">
    <template v-for="(item,index) in stepConfig">
      <div :key="index" :style="{width: stepItemWidth + '%'}" class="tep tep_div" :class="{'past-step': item.step < currentStep,'current-step':item.step === currentStep,'future-step': item.step > currentStep}">
        <span class="title">{{item.step}}</span><span class="word">{{item.title}}</span>
        <div v-show="showArrows(item.step)" :class="{'past-step': item.step < currentStep,'current-step':item.step === currentStep}"></div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    // use： <hera-steps :stepConfig="stepConfig" :currentStep="currentStep"></hera-steps>
    // fx: [ {step:1,title:'步骤一'},{step:2,title:'步骤二'} ]
    stepConfig: {
      type: Array,
      default: () => []
    },
    // 当前步骤
    currentStep: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      // 三种状态  past current future
      stepItemWidth: ''
    }
  },
  mounted () {
    this.stepItemWidth = Math.round(100 / this.stepConfig.length)
  },
  methods: {
    showArrows: function (step) {
      return step < this.stepConfig.length
    }
  }
}
</script>
<style scoped lang="less">
.past-step, .future-step{
  background: #D3DEFC;;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  .title{
    display: inline-block;
    font-weight: 900;
    font-size: 28px;
    width: 40px;
    height:40px;
    background: rgba(142, 161, 255, 0.33);
    color: #4765F9;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
  }
  .word{
    font-size: 26px;
    color: #4765F9;
    margin-left:10px;
    font-weight: bold;
  }
}
.current-step {
  background-color: #4B7EFE;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  .title{
    display: inline-block;
    font-weight: 900;
    font-size: 28px;
    width: 40px;
    height:40px;
    background: #fff;
    color: #4B7EFE;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
  }
  .word{
    font-size: 26px;
    margin-left:10px;
    font-weight: bold;
  }
}
// .future-step {
//   background-color: #eceff4;
//   color: #282828;
// }
.mer-steps-wrapper {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
  font-size: 15px;
  color: #282828;
  height: 80px;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.mer-steps-wrapper  > .tep {
  line-height: 80px;
  text-align: center;
  // float: left;
  position: relative;
}
.tep_div > div {
  position: absolute;
  border: 15px solid #fff;
  border-bottom: 0;
  border-left: 0;
  border-radius: 5px;
  top: 0;
  right: -29px;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  z-index: 2;
}
</style>
